<template>
  <div class='container'>
    <div class="app-container">
      <el-card :header="title">
        <!-- 表单 -->
        <el-form label-width="120px" ref="questionForm" :model="questionForm" :rules="rules">
            <el-form-item label="学科:" prop="subjectID">
              <el-select style="width: 25%" v-model="questionForm.subjectID" @change="chooseSub">
                <el-option v-for="item in subjectsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录:" prop="catalogID">
              <el-select style="width: 25%" v-model="questionForm.catalogID">
                <el-option v-for="item in directorysList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业:" prop="enterpriseID">
              <el-select style="width: 25%" v-model="questionForm.enterpriseID">
                <el-option v-for="item in companysList" :key="item.id" :label="item.company" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市:" prop="province">
              <!-- 省市区 -->
                <el-row type="flex" style="width: 25%">
                  <el-col :span="12">
                    <el-select v-model="questionForm.province" @change="chooseCity">
                      <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item" ></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select v-model="questionForm.city">
                      <el-option v-for="(item,index) in areaList" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="方向:" prop="direction">
              <el-select style="width: 25%" v-model="questionForm.direction">
                <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="题型:" prop="questionType">
              <!-- 单选 -->
              <el-radio-group v-model="questionForm.questionType" @change="typeRadio">
                <el-radio label="1">单选</el-radio>
                <el-radio label="2">多选</el-radio>
                <el-radio label="3">简答</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="难度:" prop="difficulty">
              <!-- 单选 -->
              <el-radio-group v-model="questionForm.difficulty">
                <el-radio label="1">简单</el-radio>
                <el-radio label="2">一般</el-radio>
                <el-radio label="3">困难</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题干:" prop="question">
                <!-- 富文本 -->
                <rich-text  v-model="questionForm.question"/>
            </el-form-item>
            <el-form-item label="选项:" v-show="isShowChoose" prop="options">
              <!-- 选项组件 -->
              <options :chooseList="chooseList" :isShowRadio.sync="isShowRadio"
              @choiceData="choiceData"
              :questionType="questionForm.questionType"
              :isShowChoose.sync="isShowChoose"
              :question="questionForm.question"
              >
              </options>
              <!-- 按钮 -->
              <el-button type="danger" :disabled="disabled" @click="addChoose">
                <el-icon class="el-icon-plus"></el-icon>
                增加选项和答案
              </el-button>
            </el-form-item>
            <el-form-item label="解析视频:" prop="videoURL">
              <!-- 视频 -->
              <el-row type="flex">
                <el-col :span="6">
                  <el-input v-model="questionForm.videoURL"></el-input>
                </el-col>
                <el-col :span="6"  style="margin-left: 10px">
                  <el-button @click="playVideo" type="primary" >
                    <i class="el-icon-video-play"></i>
                    点击播放
                  </el-button>
                </el-col>
                <el-dialog :visible.sync="isShowVideo" title="解析视频：">
                  <video v-if="isShowVideo" :src="playVideoURL" preload="metadata" poster='@/assets/logo.png' autoplay controls width="100%" height="420px"></video>
                </el-dialog>
              </el-row>
            </el-form-item>
            <el-form-item label="答案解析:" prop="answwer">
              <!-- 富文本 -->
              <rich-text v-model="questionForm.answer" />
            </el-form-item>
            <el-form-item label="题目备注:" prop="remarks">
              <el-input
                style="width:25%"
                type="textarea"
                placeholder="请输入内容"
                v-model="questionForm.remarks"
                maxlength="300"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item label="试题标签:" prop="tags">
              <el-select v-model="questionForm.tags">
                <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.native="onSubmit">确认提交</el-button>
            </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import options from '../components/wyl/options.vue'
import richText from '../components/wyl/rich-text.vue'
import { add, detail, update } from '@/api/hmmm/questions'
import { simple as subSimple } from '@/api/hmmm/subjects'
import { simple as dirSimple } from '@/api/hmmm/directorys'
import { direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import { list as companyList } from '@/api/hmmm/companys'
import { simple as tagSimple } from '@/api/hmmm/tags'
export default {
  components: {
    options,
    richText
  },
  data () {
    return {
      isShowVideo: false, // 是否播放视频
      questionForm: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '', // 题型
        difficulty: '', // 难度
        question: '', // 题干
        options: [], // 选项
        videoURL: '', // 视频解析
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '', // 试题标签
        creatorID: ''
      },
      rules: {
        subjectID: [
          {
            required: true,
            trigger: 'blur',
            message: '学科不能为空'
          }
        ],
        catalogID: [
          {
            required: true,
            trigger: 'blur',
            message: '目录不能为空'
          }
        ],
        enterpriseID: [
          {
            required: true,
            trigger: 'blur',
            message: '企业不能为空'
          }
        ],
        province: [
          {
            required: true,
            trigger: 'blur',
            message: '城市不能为空'
          }

        ],
        direction: [
          {
            required: true,
            trigger: 'blur',
            message: '方向不能为空'
          }
        ]
      },
      subjectsList: [], // 学科列表
      directorysList: [], // 目录列表
      direction, // 方向列表
      cityList: [], // 城市列表
      areaList: [], // 区列表
      counts: '', // 企业总数
      companysList: [], // 企业列表
      tagsList: [], // 试题标签列表
      isShowRadio: null, // 控制选项的展示
      disabled: true, // 控制增加选项按钮
      isShowChoose: true, // 控制选项模块的展示隐藏
      chooseList: [{ code: 'A', title: '' }, { code: 'B', title: '' }, { code: 'C', title: '' }, { code: 'D', title: '' }], // 选项列表数据
      choiceArr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'], // 所有十个选项
      playVideoURL: '', // 视频链接
      routeId: null
    }
  },
  computed: {
    title () {
      return this.questionForm.id ? '试题修改' : '试题录入'
    }
  },
  watch: {
    '$route.params.id' () {
      this.initData()
    }
  },
  created () {
    // 学科简单列表
    this.subSimple()
    // this.subList()
    // 企业
    this.companyList()
    // 城市
    this.provinces()
    // 初始化判断id
    this.initData()
  },
  methods: {
    // 学科
    async subSimple () {
      const res = await subSimple()
      this.subjectsList = res.data
    },

    // 目录,试题标签联动
    async chooseSub (name) {
      const { data: dirData } = await dirSimple(name)
      const { data: tagData } = await tagSimple(name)
      this.directorysList = dirData
      this.tagsList = tagData
    },
    // 二级城市
    async provinces () {
      this.cityList = await provinces()
    },
    // 二三联动
    async chooseCity (name) {
      this.areaList = await citys(name)
      console.log(this.areaList)
    },
    // 企业
    async companyList () {
      const { data: { counts } } = await companyList()
      const { data: { items } } = await companyList({ page: 1, pagesize: counts })
      this.companysList = items
    },
    // 题型单选
    typeRadio (val) {
      // 判断题型，决定显示的选项
      if (val === '1') {
        this.disabled = true // 按钮禁用
        this.isShowChoose = true // 显示选项组件
        this.isShowRadio = true // 显示单选组
      } else if (val === '2') {
        this.isShowChoose = true
        this.isShowRadio = false
        this.disabled = false
      } else {
        this.isShowChoose = false
      }
    },
    // 新增选项和答案
    addChoose () {
      // 最多十个选项
      if (this.chooseList.length >= 10) {
        this.disabled = true
        return this.$message.error('选项已达上限')
      }
      // 按照字母顺序依次添加
      const data = this.choiceArr.find(item => {
        return !this.chooseList.map(obj => obj.code).includes(item)
      })
      this.chooseList.push({ code: data, title: '' })
    },
    // 点击提交
    onSubmit () {
      this.$refs.questionForm.validate().then(_ => {
        // 判断新增、编辑
        if (this.questionForm.id) {
          // 编辑
          return update(this.questionForm)
        } else {
          // 发送请求
          return add(this.questionForm)
        }
      }).then(_ => {
        this.$message.success('操作成功')
        // 添加或编辑成功后重置表单并调回去
        this.$refs.questionForm.resetFields()
        this.$router.back()
      }).catch(() => {
        this.$message.error('缺少必传参数')
      })
    },
    // 编辑数据  回写
    async editQuestion () {
      const id = this.$route.params.id
      const res = await detail({ id })
      this.questionForm = res.data
      // 选项数据回填
      this.chooseList = this.questionForm.options
    },
    // 选项数据
    choiceData (radio, checkList) {
      if (radio) {
        // 有值说明是单选
        // 赋值给表单
        this.questionForm.options = this.chooseList.map((item, obj = {}) => {
          if (item.code === radio) {
            obj = {
              code: item.code,
              title: item.title,
              img: '',
              isRight: true
            }
          } else {
            obj = {
              code: item.code,
              title: item.title,
              img: '',
              isRight: false
            }
          }
          return obj
        })
      } else {
        this.questionForm.options = this.chooseList.map((item, obj = {}) => {
          if (checkList.find(val => val === item.code)) {
            obj = {
              code: item.code,
              title: item.title,
              img: '',
              isRight: true
            }
          } else {
            obj = {
              code: item.code,
              title: item.title,
              img: '',
              isRight: false
            }
          }
          return obj
        })
      }

      // console.log(this.questionForm.options);
    },
    // 视频播放
    playVideo () {
      this.isShowVideo = true
      if (this.questionForm.videoURL) {
        this.playVideoURL = this.questionForm.videoURL
      }
    },
    // 初始化判断
    initData () {
      if (this.$route.params.id) {
        if (this.$route.params.id !== ':id') {
        // 有id为编辑
          this.editQuestion()
        } else {
          this.questionForm = {
            subjectID: '', // 学科
            catalogID: '', // 目录
            enterpriseID: '', // 企业
            province: '', // 城市
            city: '', // 地区
            direction: '', // 方向
            questionType: '', // 题型
            difficulty: '', // 难度
            question: '', // 题干
            options: [], // 选项
            videoURL: '', // 视频解析
            answer: '', // 答案解析
            remarks: '', // 题目备注
            tags: '', // 试题标签
            creatorID: ''
          }
          this.chooseList = [{ code: 'A', title: '' }, { code: 'B', title: '' }, { code: 'C', title: '' }, { code: 'D', title: '' }]
        }
      } else {
        this.questionForm = {
          subjectID: '', // 学科
          catalogID: '', // 目录
          enterpriseID: '', // 企业
          province: '', // 城市
          city: '', // 地区
          direction: '', // 方向
          questionType: '', // 题型
          difficulty: '', // 难度
          question: '', // 题干
          options: [], // 选项
          videoURL: '', // 视频解析
          answer: '', // 答案解析
          remarks: '', // 题目备注
          tags: '', // 试题标签
          creatorID: ''
        }
        this.chooseList = [{ code: 'A', title: '' }, { code: 'B', title: '' }, { code: 'C', title: '' }, { code: 'D', title: '' }]
      }
    }
  }
}
</script>

<style scoped>

</style>
